<template>
  <Layout>
    <van-nav-bar
      title="vite-webapp-template"
      left-text="返回"
      left-arrow
      @click-left="toHome"
    />
    <van-form style="margin-top: 50px">
      <div style="margin: 15px 0">
        <van-button block type="danger" @click="debounce">
          点击多次， 只生效一次：防抖
        </van-button>
        <van-button style="margin-top: 20px" block type="warning" @click="post">
          点击多次，间隔2秒生效一次：节流
        </van-button>
      </div>
    </van-form>
    <div>点击生效 {{ number }} 次</div>
  </Layout>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import _ from "lodash";
import { ref } from "vue";
const router = useRouter();
const number = ref(0);
const debounce = _.debounce(() => {
  number.value += 1;
  console.log("debounce");
}, 1000);

const post = _.throttle(() => {
  number.value += 1;
  console.log("throttle");
}, 2000);

const toHome = () => {
  router.push("/home");
};
</script>

<style scoped lang="scss"></style>
